import Screenfull from 'screenfull'
import { VC, Component } from '@/VC-vue'

@Component({})
export default class ScreenFull extends VC {
    isFull: boolean = false

    handleFull() {
        const SF = Screenfull as any
        const caniuse: boolean = SF.enabled
        if (!caniuse) {
            this.$message.error(
                '您的浏览器暂不支持全屏功能，请下载最新版本的google浏览器或其他主流浏览器~'
            )
            return false
        }
        this.isFull = !this.isFull
        SF.toggle()
    }

    get iconStyle() {
        return {
            color: '#999',
            'font-size': '20px',
            cursor: 'pointer'
        }
    }

    render() {
        return (
            <a-icon
                style={this.iconStyle}
                onclick={this.handleFull}
                type={this.isFull ? 'fullscreen-exit' : 'fullscreen'}
            />
        )
    }
}
